<template>
  <div class="file-horizontal-item">
    <el-popover
      placement="top"
      :title="fileName"
      :width="150"
      popper-class="file-pop"
      trigger="hover"
    >
      <div class="control">
        <el-button
          :disabled="!option.actions.includes('review')"
          size="mini"
          icon="el-icon-view"
          type="success"
          circle
          @click="$emit('onReview',fileUrl,fileName)"
        />
        <el-button
          v-if="option.actions.includes('download')"
          size="mini"
          icon="el-icon-download"
          type="primary"
          circle
          @click="$emit('onDownload',fileUrl,fileName)"
        />
        <el-button
          v-if="option.actions.includes('remove') && !provideDisabled"
          size="mini"
          icon="el-icon-close"
          type="danger"
          circle
          @click="$emit('onRemove')"
        />
      </div>
      <div slot="reference" class="item-content">
        <el-image :src="option.imageUrl || option.icon" fit="contain" />
        <div class="name over-hide">{{ fileName || '...' }}</div>
      </div>
    </el-popover>
  </div>
</template>
<script>
  import fileItemMixin from '../common/file-item-mixin'

  export default {
    name: 'FileItem',
    mixins: [fileItemMixin],
  }
</script>
<style scoped lang="scss">
  .file-horizontal-item {
    $wh: 34px;
    display: flex;
    flex-wrap: nowrap;
    margin-left: 10px;
    position: relative;
    width: $wh;

    .item-content {
      height: $wh;
      width: $wh;
      line-height: $wh;
      text-align: center;

      img {
        width: $wh;
        height: $wh;
        margin: auto;
      }

      .control {
        display: flex;
        justify-content: flex-end;
      }

      .name {
        text-align: center;
        width: $wh;
        position: absolute;
        bottom: -8px;
        line-height: 12px;
        font-size: 12px;
      }
    }
  }
</style>
